<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片中心点沿圆弧运动</title>
    <style>
      #arc {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        border-radius: 50%;
        position: relative;
        margin: 50px auto;
      }
      #image1 {
        width: 50px;
        height: 50px;
        position: absolute;
        border-radius: 25px;
        top: 75px; /* 初始位置 */
        left: 175px; /* 初始位置 */
      }
      #image2 {
        width: 50px;
        height: 50px;
        position: absolute;
        border-radius: 25px;
        top: 175px; /* 初始位置 */
        left: 75px; /* 初始位置 */
      }
      #image3 {
        width: 50px;
        height: 50px;
        position: absolute;
        border-radius: 25px;
        top: 100px; /* 初始位置 */
        left: 25px; /* 初始位置 */
        /* animation: scale 1s linear; */
      }
      /* @keyframes scale {
        0% {
          scale: 1;
        }
        100% {
          scale: 0.5;
        }
      } */
      #image4 {
        width: 50px;
        height: 50px;
        position: absolute;
        border-radius: 25px;
        top: 100px; /* 初始位置 */
        left: 100px; /* 初始位置 */
        /* animation: scale 1s linear; */
      }
    </style>
  </head>
  <body>
    <div id="arc">
      <!-- <img id="image1" src="1.png" alt="弧形轨迹上的图片" />
      <img id="image2" src="1.png" alt="弧形轨迹上的图片" /> -->
      <img id="image3" src="1.png" alt="弧形轨迹上的图片" />
      <img id="image4" src="1.png" alt="弧形轨迹上的图片" />
    </div>

    <script>
      const image = document.getElementById("image3")
      const image4 = document.getElementById("image4")
      const arc = document.getElementById("arc")
      const radius = arc.clientWidth / 2  - (image.clientWidth / 2)
      let angle = Math.PI
      let angle4 = 0

      function animate() {
        angle -= 0.01 // 控制速度，数值越小速度越慢
        const x = radius * Math.cos(angle) + radius
        const y = radius * Math.sin(angle) + radius

        image.style.left = x + "px"
        image.style.top = y + "px"

        // // requestAnimationFrame(animate)
        setTimeout(() => {
          if (angle > 2.5) {
            console.log(angle)
            // animate()
          }
        }, 17)
      }
      animate()

      function animate4() {
        angle4 -= 0.01 // 控制速度，数值越小速度越慢
        const x = radius * Math.cos(angle4) + radius
        const y = radius * Math.sin(angle4) + radius

        image4.style.left = x + "px"
        image4.style.top = y + "px"

        // // requestAnimationFrame(animate)
        setTimeout(() => {
          // if (angle4 < 2) {
            console.log(angle4)
            // animate4()
          // }
        }, 17)
      }
      animate4()
    </script>
  </body>
</html>
